/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    
    var Employee = Ext.data.Record.create([{
        name: 'name',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }, {
        name: 'start',
        type: 'date',
        dateFormat: 'n/j/Y'
    }, {
        name: 'salary',
        type: 'float'
    }, {
        name: 'active',
        type: 'bool'
    }, {
        name: 'type',
        type: 'int'
    }]);
    
    
    // hideous function to generate employee data
    var genData = function(){
        var data = [];
        var s = new Date(2007, 0, 1);
        var now = new Date(), i = -1;
        while (s.getTime() < now.getTime()) {
            var ecount = Ext.ux.getRandomInt(0, 3);
            for (var i = 0; i < ecount; i++) {
                var name = Ext.ux.generateName();
                data.push({
                    start: s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
                    name: name,
                    email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
                    active: !!Math.floor(Ext.ux.getRandomInt(0, 1)),
                    type: Math.floor(Ext.ux.getRandomInt(0, 1)),
                    salary: Math.floor(Ext.ux.getRandomInt(35000, 85000) / 1000) * 1000
                });
            }
            s = s.add(Date.MONTH, 1);
        }
        return data;
    }
    
    
    var store = new Ext.data.GroupingStore({
        reader: new Ext.data.JsonReader({
            fields: Employee
        }),
        data: genData(),
        sortInfo: {
            field: 'start',
            direction: 'ASC'
        }
    });
    
    var combo = new Ext.form.ComboBox({
        store: [[0, '男'], [1, '女']],
        emptyText: '请选择..',//提示字符串
        forceSelection: true,//强制选择
        triggerAction: 'all'//点击下拉按钮全部显示
    });
	
    //可重用的comboRenderer，用于grid渲染
    Ext.util.Format.comboRenderer = function(combo){
        return function(value){
            var record = combo.findRecord(combo.valueField, value);
            return record ? record.get(combo.displayField) : combo.valueNotFoundText;
        }
    }
	checkRole = function(){
		return {
			init: function(grid){
				var cm = grid.getColumnModel();
				cm.setEditable(2,false);
				
			}
		}
	}();
	
	Ext.grid.CheckboxSelectionModel.override({
		initEvents:Ext.grid.CheckboxSelectionModel.prototype.initEvents.createSequence(function(x){		
			console.log(arguments.caller);
		})
	})
	
	var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:false})
	
    var grid = new Ext.grid.GridPanel({
        store: store,
        width: 600,
        region: 'center',
        margins: '0 5 5 5',
        autoExpandColumn: 'name',
        plugins: ['roweditor',checkRole],
        view: new Ext.grid.GroupingView({
            markDirty: false
        }),
		sm:sm,
        tbar: [{
            iconCls: 'icon-user-add',
            text: '添加雇员',
            handler: function(){
                var e = new Employee({
                    name: '',
                    email: '',
                    start: (new Date()).clearTime(),
                    salary: 0,
                    active: true,
                    type: 1
                });
                grid.editor.stopEditing();
                store.insert(0, e);
                grid.getView().refresh();
                grid.getSelectionModel().selectRow(0);
                grid.editor.startEditing(0);
            }
        }, {
            ref: '../removeBtn',
            iconCls: 'icon-user-delete',
            text: '删除雇员',
            disabled: true,
            handler: function(){
                grid.editor.stopEditing();//支持多选的啊
                var s = grid.getSelectionModel().getSelections();
                for (var i = 0, r; r = s[i]; i++) {
                    store.remove(r);
                }
            }
        },{
			xtype:'datefield',
			fieldLabel:'日期',
			allowBlank:false
		}],
        columns: [new Ext.grid.RowNumberer(),sm,{
            id: 'name',
            header: '姓名',
            dataIndex: 'name',
            width: 220,
            sortable: true,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }, {
            header: '邮箱',
            dataIndex: 'email',
            width: 150,
            sortable: true,
            editor: {
                xtype: 'textfield',
                allowBlank: false,
                vtype: 'email'
            }
        }, {
            xtype: 'datecolumn',
            header: '入职日期',
            dataIndex: 'start',
			altFormats:'Ymd|md|m-d|d|Y-m-d',
            format: 'Y年m月d日',
            width: 100,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('M y'),
            editor: {
                xtype: 'datefield',
                allowBlank: false,
                minValue: '2006-08-08',
				altFormats :'Ymd|ymd|m-d|md|d|Y-m-d',
                minText: '入职日期不得早于公司创建日期！!',
                maxValue: (new Date()).format('Y-m-d')
            }
        }, {
            xtype: 'numbercolumn',
            header: '薪水',
            align: 'right',
            dataIndex: 'salary',
            format: '￥0,0.00',
            width: 100,
            sortable: true,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }
        }, {
            xtype: 'booleancolumn',
            header: '启用',
			tooltip :'启用状态',
            dataIndex: 'active',
            align: 'center',
            width: 50
        }, {
            header: '类型',
            dataIndex: 'type',
            width: 50,
			renderer:Ext.util.Format.comboRenderer(combo),
            editor: combo
        }]
    });
    
    var layout = new Ext.Panel({
        title: 'Employee Salary by Month',
        layout: 'fit',
        width: 600,
        height: 600,
        items: [grid]
    });
    layout.render(Ext.getBody());
    
    grid.getSelectionModel().on('selectionchange', function(sm){
        grid.removeBtn.setDisabled(sm.getCount() < 1);
    });
});
